<template>
    <div>
      <h2 class="quick-start-title">快速上手</h2>
      <div class="tutorial-section">
        <div class="tutorial-step" @click="nextStep">
          <div class="tutorial-image">
            <div class="image-box" :style="{ backgroundImage: `url(${currentStep.image})` }">
              <div class="overlay">{{ currentStep.title }}</div>
            </div>
          </div>
          <div class="tutorial-content">
            <h3>{{ currentStep.title }}</h3>
            <p>{{ currentStep.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        currentIndex: 0,
        steps: [
          {
            title: '第一步',
            content: '这是第一步的内容介绍，用于指导用户开始其中一个操作流程。',
            image: require('@/assets/step/step1.png')
          },
          {
            title: '第二步',
            content: '这是第二步的内容介绍，用于指导用户继续操作流程。',
            image: require('@/assets/step/step2.png')
          }
          // 可以继续添加更多步骤
        ]
      };
    },
    computed: {
      currentStep() {
        return this.steps[this.currentIndex];
      }
    },
    methods: {
      nextStep() {
        if (this.currentIndex < this.steps.length - 1) {
          this.currentIndex++;
        } else {
          this.currentIndex = 0; // 循环回到第一步
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .quick-start-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #42b983; /* 绿色标题 */
    margin-bottom: 1.5rem; /* 边距 */
  }
  
  .tutorial-section {
    display: flex;
    align-items: stretch; /* 使元素高度一致 */
    margin: 2rem 0;
    background-color: #f8f9fa; /* 背景颜色 */
    border-radius: 10px;
    padding: 1rem; /* 内边距 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }
  
  .tutorial-step {
    display: flex;
    flex: 1; /* 让步骤占满整个行 */
    cursor: pointer; /* 鼠标悬停时显示为指针 */
  }
  
  .tutorial-content {
    flex: 1; /* 占满剩余空间 */
    padding: 1rem; /* 添加一些内边距 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中对齐文字 */
  }
  
  .tutorial-image {
    position: relative;
    width: 50%; /* 占用一半宽度 */
  }
  
  .image-box {
    width: 100%;
    height: 450px; /* 盒子的高度 */
    background-size: cover; /* 自适应盒子大小 */
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 确保内容不溢出 */
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease;
  }
  
  .image-box:hover .overlay {
    opacity: 1; /* 鼠标悬停时显示蒙版 */
  }
  </style>
  